<div class="modal-header">
    <h3 ng-show="albumAction === 'add'">Add an album</h3>
    <h3 ng-show="albumAction === 'update'">Edit an album</h3>
</div>
<div class="modal-body">
    <form name="albumForm" role="form">
        <div class="form-group has-feedback" ng-class="{'has-warning': albumForm.title.$invalid, 'has-success': albumForm.title.$valid}">
            <label for="title">Album Title</label>
            <input type="text" class="form-control input-large" id="title" name="title" required ng-model="album.title">
            <span class="glyphicon form-control-feedback" ng-class="{'glyphicon-warning-sign': albumForm.title.$invalid, 'glyphicon-ok': albumForm.title.$valid}"></span>
        </div>
        <div class="form-group has-feedback" ng-class="{'has-warning': albumForm.artist.$invalid, 'has-success': albumForm.artist.$valid}">
            <label for="artist">Artist</label>
            <input type="text" class="form-control input-large" id="artist" name="artist" required ng-model="album.artist">
            <span class="glyphicon form-control-feedback" ng-class="{'glyphicon-warning-sign': albumForm.artist.$invalid, 'glyphicon-ok': albumForm.artist.$valid}"></span>
        </div>
        <div class="form-group has-feedback" ng-class="{'has-warning': albumForm.releaseYear.$invalid, 'has-success': albumForm.releaseYear.$valid}">
            <label for="releaseYear">Release Year</label>
            <input type="text" class="form-control input-small" id="releaseYear" name="releaseYear" required ng-model="album.releaseYear" ng-pattern=yearPattern>
            <span class="glyphicon form-control-feedback" ng-class="{'glyphicon-warning-sign': albumForm.releaseYear.$invalid, 'glyphicon-ok': albumForm.releaseYear.$valid}"></span>
        </div>
        <div class="form-group has-feedback" ng-class="{'has-warning': albumForm.genre.$invalid, 'has-success': albumForm.genre.$valid}">
            <label for="genre">Genre</label>
            <input type="text" class="form-control input-medium" id=genre name="genre" required ng-model="album.genre">
            <span class="glyphicon form-control-feedback" ng-class="{'glyphicon-warning-sign': albumForm.genre.$invalid, 'glyphicon-ok': albumForm.genre.$valid}"></span>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-primary btn-md active" ng-disabled="albumForm.$invalid" ng-click="ok()" >OK</button>
    <button class="btn btn-warning btn-md active" ng-click="cancel()">Cancel</button>
</div>
